<template>
  <div class="backTop" v-show="poloIsShow" @click="backTop">
    <img src="https://ossweb-img.qq.com/images/lol/v3/polo.gif" alt="" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue"
import bus from "@/eventBus"
const poloIsShow = ref<boolean>(false)
bus.on("scrollTop", data => {
  poloIsShow.value = data > 400
})
const backTop = () => {
  window.scrollTo({
    top: 0,
    behavior: "smooth",
  })
}
</script>

<style lang="scss" scoped>
.backTop {
  position: fixed;
  z-index: 99;
  animation: showPolo 1.4s 0.2s ease 1 forwards;
  cursor: var(--cursor-B);
  transition: all 0.3 ease;
  &:hover img {
    animation: jump ease 1.5s 1;
  }
  img {
  }
}
@keyframes showPolo {
  0% {
    transform: translateY(70px) scaleX(0.8) scaleY(1.2);
  }
  44% {
    transform: translateY(0) scaleX(0.8) scaleY(1.2);
  }
  50% {
    transform: translateY(-10px) scaleX(1) scaleY(1);
  }
  60% {
    transform: translateY(0) scaleX(1) scaleY(1);
  }
  70% {
    transform: translateY(0) scaleX(1.1) scaleY(0.9);
  }
  100%,
  80% {
    transform: translateY(0) scaleX(1) scaleY(1);
    right: 30px;
    bottom: 10px;
  }
}
@media screen and (max-width: 1000px) {
  @keyframes showPolo {
    0% {
      transform: translateY(70px) scaleX(0.8) scaleY(1.2);
    }
    44% {
      transform: translateY(0) scaleX(0.8) scaleY(1.2);
    }
    50% {
      transform: translateY(-10px) scaleX(1) scaleY(1);
    }
    60% {
      transform: translateY(0) scaleX(1) scaleY(1);
    }
    70% {
      transform: translateY(0) scaleX(1.1) scaleY(0.9);
    }
    100%,
    80% {
      transform: translateY(0) scaleX(1) scaleY(1);
      right: 20px;
      bottom: 60px;
    }
  }
}
</style>
